<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>消息</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

    <style>
        .message-new{
            position:relative;
            top:-3px;
            width:8px;
            height:8px;
            /*background-color:red;*/
            /*border-radius:50%;*/
            /*background-repeat: no-repeat;*/
            /*background-position: center left;*/
            /*background-image:url(../../image/message_new.png) ;*/
            /*background-size:20px 15px;*/
            border-radius:50%;
            background-color:red;

        }
    </style>
</head>
<body>
<div id="app" class="container" v-cloak>
    <div class="message-none" v-if="messages.length == 0">
        <img v-src="'../../image/not_available.png'">
        <div>暂无消息</div>
    </div>
    <div style="margin-bottom:10px;">
        <div class="message-row" v-for="message in messages" v-myclick="[message, messageJump]">
            <div>
                <span v-show="message.is_read == 0" class="message-new"></span>
                {{message.title}}
            </div>
            <div>{{message.content}}</div>
            <div><span>{{message.date_add | time}}</span><span v-if="message.action.action_id != 1">查看详情></span></div>
        </div>
    </div>
    <lazy-load v-if="messages.length != 0"
               :has-more="hasMore"
               count-per-page="10"
               :arr="messages"
               :url="url">
    </lazy-load>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script>
    var messages,
        hasMore,
        vm;
    apiready = function () {
        setBSImg();
        showProgress();

        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            messages = ret.content;
            hasMore = messages.length >= 10;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.getMessages, data, callback);

        setRefreshHeaderInfo(refresh);
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                messages: messages,
                hasMore: hasMore,
                url: URL.getMessages,
            },
            methods: {
                messageJump: function (message) {
                    if (message.is_read == 0) {
                        message.is_read = 1;
                        var data = {
                            member_id: getPrefs('member_id'),
                            message_id: message.message_id,
                        };
                        var callback = function (ret) {
                            api.sendEvent({
                                name: 'getUnReadMsgCount',
                                extra: {count: ret.content}
                            });
                        };
                        pinet.post(URL.readOneMessage, data, callback);
                    }
                    actionJump(message.action);
                },
            },
        })
    }

    function refresh() {
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            if (vm) {
                vm.messages = ret.content;
            } else {
                initApp();
            }
            api.refreshHeaderLoadDone();
        };
        var errback = function () {
            api.refreshHeaderLoadDone();
        };
        pinet.post(URL.getMessages, data, callback, errback);
    }

</script>
</html>
